<template>
  <div :class="[isSlot === false? 'res-span' : 'res-span-active',{'hidden':!selfShow}]">
    <div id="mg" style="width: 750px;padding-bottom: 40px;margin: 0px auto;background:#FFFFFF ;border-radius: 10px">
      <div class="top">
        <div style="display: flex;flex-direction: row">
          <h2>订单信息</h2>
          <span class=" s1 el-icon-close" @click="onClose"></span>
        </div>
      </div>
      <div class="main" v-if="resData!==null">
        <!--基本信息-->
        <div class="container">
          <span class="title">基本信息</span>
          <div class="d1">
            <span>订单编号</span>
            <div class="d2">
              <span>{{resData.orderNo}}</span>
            </div>
          </div>
          <div class="d1">
            <span>订单生成时间</span>
            <div class="d2">
              <span>{{resData.createDate}}</span>
            </div>
          </div>
          <div class="d1">
            <span>账号</span>
            <div class="d2">
              <span>{{resData.account}}</span>
              <span style="display:none">{{resData.userId}}</span>
            </div>
          </div>
          <div class="d1">
            <span>出版社</span>
            <div class="d2">
              <span>{{resData.pressName}}</span>
              <span style="display:none">{{resData.pressId}}</span>
            </div>
          </div>
          <div class="d1">
            <span>联系人</span>
            <div class="d2">
              <span>{{resData.contacts}}</span>
            </div>
          </div>
          <div class="d1">
            <span>联系方式</span>
            <div class="d2">
              <span>{{resData.contactWay}}</span>
            </div>
          </div>
          <div class="d1">
            <span>关联图书项目</span>
            <div class="d2">
              <span>{{resData.projectName}}</span>
            </div>
          </div>
        </div>
        <!--资源费用-->
        <div class="container">
          <hr>
          <span class="title" style="margin-top: 20px">资源费用</span>
        </div>
        <!--存储费用-->
        <div class="container">
          <hr>
          <span class="title" style="margin-top: 20px">存储费用</span>
        </div>
        <!--CDN费用-->
        <div class="container">
          <hr>
          <span class="title" style="margin-top: 20px">CDN费用</span>
          <div class="d1">
            <span class="">电子书页面大小</span>
            <div class="d20">
              <span style="float:right">x {{getPageSize}}MB</span>
            </div>
          </div>
          <div class="d1" style="margin-top: 15px">
            <span class="">数字资源大小</span>
            <div class="d20">
              <span style="float:right">x {{getResourceSize}}MB</span>
            </div>
          </div>
          <div class="d1" style="margin-top: 15px">
            <span class="">图书发行数量</span>
            <div>
              <div style="margin-left:35px;">
                <span style="font-size: 14px">x</span>
                <input type="text" placeholder="请输入实际发行数量" class="myInput" v-model="bookNum"
                       onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                       onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                <span style="font-size: 14px">本</span>
              </div>
            </div>
          </div>
        </div>
        <!--tts费用-->
        <div class="container">
          <hr>
          <div class="d1">
            <span class="title" style="margin-top: 10px">TTS费用 (文字转语音)</span>
          </div>
        </div>
        <!--是否委托-->
        <div class="container">
          <hr>
          <div class="d8">
            <span class="title" style="margin-top: 20px">是否为委托加工图书</span>
          </div>

        </div>
        <!--total费用-->
        <div class="container">
          <hr>
          <div class="d1">
            <span>CDN费用:</span>
            <span>¥ {{getCdnTotal}} </span>
          </div>
        </div>
        <!--总价-->
        <div>
          <hr style="width: 599px;margin-left: 76px">
          <div class="d1" style="margin-left: 20px;margin-top: 20px">
            <span
              style="margin-left: 66px;font-weight: bolder;margin-top: 25px;font-size: 14px;color:#1f1f1f">应付总额:</span>
            <span style="color:red;font-size: 20px;font-weight: bolder;margin-top: 21px;margin-left:-140px">¥  {{getCdnTotal}}</span>
            <button class="btn4" @click="send">立即支付</button>
          </div>
        </div>
      </div>
      <balance :resData="resData" :cdnTotalAmount="cdnTotalAmount" :bookNum="bookNum"></balance>
      <div id="tips" class="tips" :hidden='tips'>
        <img :src="resultIcon"/>
        <span>{{msg}}</span>
      </div>
    </div>
  </div>

</template>

<script>
  import ajax from '../../common/ajax'
  import api from '../../common/api'
  import Balance from './Balance'
  import bus from '../../assets/eventBus'
  import util from '../../common/util'

  let t
  let a
  var re = /^[0-9]*[1-9][0-9]*$/;
  let bookGuid

  export default {
    name: "AddSlot",
    components: {Balance},
    props: {
      isSlot: {
        default: false
      }
    },
    data() {
      return {
        radio: '1',
        pressId: '',
        bookNum: '',
        ebookPageNum: '',
        resourceNum: '',
        cdnTotalAmount: '',
        userId: '',
        resData: null,
        bookGuid: '',
        resultIcon: '../assets/images/icon_error.png',
        msg: '',
        tips: true,
        selfShow: false
      }
    },
    computed: {
      //电子书页面大小
      getPageSize() {
        return (Math.round((this.resData.ebookPageSize / 1024 / 1024) * 100) / 100).toFixed(2)
      },

      //数字资源大小
      getResourceSize() {
        return (Math.round((this.resData.resourceSize / 1024 / 1024) * 100) / 100).toFixed(2)
      },

      //cdn总价
      getCdnTotal() {
        if (re.test(this.bookNum)) {
          return (Math.round((this.getPageSize * 1 + this.getResourceSize * 1) / 1024 * 0.8 * this.bookNum * 100) / 100).toFixed(2)
        } else {
          return '0.00'
        }

      },
    },
    //去掉横向滚动条
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'overflow-x:hidden')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },

    created() {
      let that = this
      if (this.isSlot !== false) {
        bus.$on('showDetail3', function (i) {
          t = i
          that.selfShow = true
          ajax.get({
            url: api.orders.routeName + api.orders.children.get + '?bookGuid=' + i + '&r=' + Math.random(),
            success(res) {
              that.resData = res
              that.getDate()
            }
          })
        })
      } else {
        ajax.get({
          url: api.orders.routeName + api.orders.children.get + '?bookGuid=' + this.$route.query.bookGuid + '&r=' + Math.random(),
          success(res) {
            that.resData = res
            that.getDate()
          }
        })
      }


    },
    mounted() {

    },

    methods: {
      /**
       * 时间格式转换
       */
      getDate() {
        this.resData.createDate = util.formate(this.resData.createDate)
      },

      /**
       * 关闭弹窗
       */
      onClose() {
        if (this.isSlot === false) {
          window.external.JSCallMFCFunctionClose()
        } else {
          this.selfShow = false
        }

      },

      /**
       * 打开支付弹窗
       */
      send() {
        if (!this.isSlot || this.bookNum !== '') {
          bus.$emit('showDetail', t, this.isSlot)
          this.cdnTotalAmount = this.getCdnTotal
        } else {
          alert('请填写发行册数')
        }
      }
    }
  }
</script>

<style scoped>
  h2 {
    font-size: 30px;
    margin-left: 310px;
    color: white;
    letter-spacing: 3px;
  }

  .s1 {
    font-size: 26px;
    margin-left: 250px;
    color: white;
    margin-top: 5px;
  }

  .s1:hover {
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  .btn4 {
    width: 129px;
    height: 40px;
    background: #4A90E2;
    border: none;
    border-radius: 3px;
    color: white;
    font-size: 14px;
    margin-top: 8px;
    margin-right: 66px;
  }

  .btn4:hover {
    cursor: pointer;
  }

  .top {
    height: 55px;
    background: #4381E6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    padding-top: 25px;
  }

  /*.main {*/
  /*overflow-y: auto;*/
  /*max-height: 1000px;*/
  /*}*/

  ::-webkit-scrollbar {
    width: 2px;
  }

  .title {
    font-size: 20px;
    font-weight: bolder;
    display: block;
  }

  .container {
    width: 600px;
    margin: 25px auto;
  }

  .d1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
    margin-left: 10px;
  }

  .d2 {
    width: 330px;
    text-align: center;
  }

  .d7 {
    width: 170px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .d8 {
    display: flex;
    flex-direction: row;
  }

  .myInput {
    border: none;
    padding-left: 10px;
    width: 130px;
    font-size: 12px
  }

  input:-ms-input-placeholder {
    font-size: 12px;
  }

  .d20 {
    width: 200px;
  }

  .tips {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.30);
    border-radius: 5px;
    position: fixed;
    top: 0;
    left: 40%;
    width: auto;
    height: 65px;
    z-index: 99;

  }

  .tips img {
    width: 30px;
    height: 30px;
    position: relative;
    margin-top: 18px;
    margin-left: 66px;
  }

  .tips span {
    font-size: 15px;
    color: #3C3C3C;
    letter-spacing: -0.05px;
    line-height: 16px;
    display: inline-block;
    position: relative;
    top: -8px;
    margin-left: 13px;
    padding-right: 66px;
  }

  .res-span {
    position: absolute;
    top: 0;
    z-index: 999;
    border-radius: 10px;
    left: 0;
    border: 1px solid #979797;
    background: #EFF3F5;
    overflow-x: hidden;
    display: block;
  }

  .res-span-active {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
    top: 0;
    z-index: 999;
    overflow-y: auto;
  }
</style>
